<template>
  <div id="player">
    <h2 class="title">猿听音乐</h2>
    <div class="search">
      <input type="text" v-model.trim="searchName" @keyup.enter="getMusic" />
      <button>
        <span class="iconfont icon-search" @click="getMusic"></span>
      </button>
    </div>
    <div class="tab-wrapper">
      <!-- tab栏 -->

      <!-- <div class="tab-bar">
        <router-link to="/results" class="bar-item" active-class="active">
          搜索结果
        </router-link>
        <router-link to="/player" class="bar-item" active-class="active">
          歌曲播放
        </router-link>
        <router-link to="/video" class="bar-item" active-class="active">
          mv
        </router-link>
        <router-link to="/comments" class="bar-item" active-class="active">
          歌曲评论
        </router-link>
      </div> -->
      <!-- 对应的内容区域 -->
      <router-view class="tab-content"> </router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchName: "",
    };
  },
  methods: {
    getMusic() {
      if (!this.searchName) {
        alert("请输入非空内容！");
        return;
      }
      this.$router.push("/results/"+this.searchName);
    },
  },
};
</script>

<style scoped>
@import url("../assets/css/index.css");
</style>